<template>
  <div class="channel-edit">
    <!-- 我的频道 单元格 -->
    <van-cell :border="false">
      <template #title>
        <div>我的频道</div>
      </template>
      <template>
        <!-- 编辑和完成字样相互切换 -->
        <van-button
          class="edit-btn"
          size="mini"
          round
          type="danger"
          plain
          @click="isEditShow = !isEditShow"
        >
          {{ isEditShow ? "完成" : "编辑" }}
        </van-button>
      </template>
    </van-cell>
    <!-- 下面的宫格grid  gutter是间隔 -->
    <!-- 判断遍历项的索引项的索引是否等于激活的频道标签索引，如果一样则作用一个高亮的CSS类名 -->
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(channel, index) in myChannels"
        :key="index"
        icon="close"
        @click="onMyChannelClick(channel, index)"
      >
        <!-- 给我的频道添加点击事件 具名插槽可以直接在标签中写slot="插槽名" -->
        <span class="text" :class="{ active: active === index }" slot="text">{{
          channel.name
        }}</span>
        <!-- 根据编辑状态添加删除标签 不能删除推荐,即index=0 -->
        <van-icon
          v-show="isEditShow && index !== 0"
          slot="icon"
          name="close"
        ></van-icon>
      </van-grid-item>
    </van-grid>
    <!--推荐频道  单元格 -->
    <van-cell :border="false">
      <template #title>
        <div>频道推荐</div>
      </template>
    </van-cell>
    <!-- 继续一个宫格grid -->
    <van-grid :gutter="10" class="recommend-grid">
      <van-grid-item
        class="channel-item"
        v-for="(channel, index) in recommendChannels"
        :key="index"
        :text="channel.name"
        icon="plus"
        @click="onAddChannel(channel)"
      />
      <!--给推荐频道添加点击事件 -->
    </van-grid>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { setItem } from '../../../utils/storage.js'
import { addUserChannelAPI, deleteUserChannelAPI } from '../../../api/index.js'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number,
      default: 0
    },
    allChannels: {
      type: Array,
      default: () => []
    }
  },
  // 计算: 所有频道 - 用户频道 = 推荐频道
  // 遍历所有频道 对每一个进行判断(是否属于我的频道),不属于就放到推荐频道中
  // 计算属性会观察方法内部所依赖的数据,如果依赖数据发生变化,则计算属性重新计算
  computed: {
    ...mapState(['user']),
    // recommendChannels () {
    // 通过filter过滤操作,筛选符合条件的数据(在全部里,但是不在我的里面的数据)
    // 通过查询数组的方法find/findIndex .遍历我的频道列表,查看是否有对应的频道内容
    //   const list = this.allChannels.filter(channel => {
    //     return !this.myChannels.find(myChannel => {
    //       return myChannel.id === channel.id
    //     })
    // 如果在我的频道中找不到该元素,那就是推荐频道中的元素
    //   })
    //   return list
    // }
    recommendChannels () {
      // 使用loadsh方法类库的步骤
      // 1. cnpm i loadsh  2. 在main.js中全局引入,并设置prototype实例方法   3. 通过this.$XXX的形式进行组件中的使用
      return [...this.$_.differenceBy(this.allChannels, this.myChannels, 'id')]
    }
  },
  data () {
    return {
      myChannelsClone: this.myChannels, // 拷贝的数据
      isEditShow: false // 控制编辑状态
    }
  },
  methods: {
    // 添加频道
    async onAddChannel (channel) {
      // 不可以直接修改父组件传递过来的参数，所以拷贝一份在data中
      this.myChannelsClone.push(channel)
      // 数据持久化处理
      // 未登录，把数据储存到本地
      // 一登录, 把数据请求接口放到线上
      if (this.user.token) {
        // 已登录
        try {
          // 已登录，数据存储到线上
          await addUserChannelAPI({
            id: channel.id, // 频道 id
            seq: this.myChannels.length // 频道的 序号
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('保存失败')
        }
      } else {
        // 未登陆 把数据存储到本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    // 不可以直接修改父组件传递过来的参数,拷贝一份data中使用,否去修改堆内存中的数据

    // 删除我的频道
    async onMyChannelClick (channel, index) {
      if (this.isEditShow) {
        // 判断是否为推荐,即index=0  是的话就直接return
        if (index === 0) return
        // 编辑状态下 删除频道
        this.myChannelsClone.splice(index, 1)
        // 删除后一个或者是删除当前的,那么索引号active -1
        if (index <= this.active) {
          this.$emit('updateActive', this.active - 1, true)
        }
        // 数据持久化 集成新增数据时的代码逻辑
        // 先判断用户token确定是否登录
        if (this.user.token) {
          // 已登录- 调接口
          try {
            // 已登录，将数据存储到线上
            await deleteUserChannelAPI(channel.id)
            this.$toast.success('删除成功了!')
          } catch (err) {
            console.log(err)
            this.$toast('删除频道失败，请稍后重试')
          }
        } else {
          // 未登录存本地
          setItem('TOUTIAO_CHANNELS', this.myChannels)
        }
      } else {
        // 完成状态下 切换频道 子传父
        this.$emit('updateActive', index)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  margin-top: 50px;
  .van-cell__title {
    height: 100%;
    line-height: 58px;
    font-size: 32px;
    color: #333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  .channel-item {
    height: 85px;
    width: 160px;
    /* 设置按钮背景 */
    :deep(.van-grid-item__content) {
      background-color: #f5f5f6;
      white-space: nowrap;
      .van-grid-item__text,
      .text {
        color: #222;
        font-size: 28px;
        margin-top: 0;
      }
      // 设置高亮
      .active {
        color: red;
      }
      // 去掉父容器的相对定位
      .van-grid-item__icon-wrapper {
        position: unset;
      }
      //关闭图标位置展示
      .van-icon-close {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }

      /* 设置按钮字体样式 */
      .van-grid-item__text {
        color: #222;
        font-size: 28px;
        margin-top: 0;
      }
    }
  }
}
// 专门针对频道推荐设置+ 的布局
.recommend-grid {
  :deep(.van-grid-item__content) {
    flex-direction: row;
    /* 设置按钮字体样式 */
    .van-icon-plus {
      font-size: 28px;
      margin-right: 6px;
    }
  }
}
</style>
